<template>
  <div class="h-87">
    <!-- 高 636px  -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">
        <page-header text="农产品供销水平分析" :ph="330">
          <v-chart :options="optionNCPGXSPFX" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农产品劳动力需求分析" :ph="330">
          <v-chart :options="optionNCPLDLQFX" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农产品加工需求水平分析" :ph="330">
          <v-chart :options="optionNCPJGXQSPFX" />
        </page-header>
      </div>
    </div>
    <!-- 高 20px -->
    <div style="height:2.14%" />
    <!-- 高 607px -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">
        <page-header text="农产品屠宰水平分析" :ph="330">
          <v-chart :options="optionNCPTZSPFX" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农产品仓储水平分析" :ph="330">
          <v-chart :options="optionNCPCCSPFX" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农产品物流水平分析" :ph="330">
          <v-chart :options="optionNCPWLSPFX" />
        </page-header>
      </div>
    </div>
    <Particulars />
  </div>
</template>

<script>
import echarts from 'echarts'
import PageHeader from 'header/PageHeader.vue'
import YlCharts from '@/components/Charts/ylCharts.vue'
import Particulars from 'header/particulars.vue'
import { formatNumber } from '@/utils/app'
import { getTowSideBalanceStatMonth, getTowSideStatMonth } from '@/api/connector'
const tooltip = function(a, b) {
  return {
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    },
    // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
    formatter: function(params, ticket, callback) {
      var htmlStr = ''
      for (var i = 0; i < params.length; i++) {
        var param = params[i]
        var xName = param.name // x轴的名称
        var seriesName = param.seriesName // 图例名称
        var value = param.value // y轴值
        var color = param.color // 图例颜色
        if (i === 0) {
          htmlStr += xName + '<br/>' // x轴的名称
        }
        htmlStr += '<div>'
        htmlStr +=
          '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
        htmlStr += seriesName + '：' + formatNumber(value) + (i === 0 ? a : b) // 圆点后面显示的文本
        htmlStr += '</div>'
      }
      return htmlStr
    }
  }
}
export default {
  name: 'IndustrialDevelopmentAnalysis',
  // eslint-disable-next-line vue/no-unused-components
  components: { YlCharts, PageHeader, Particulars },
  data() {
    return {
      menuLevel: 1,
      optionNCPGXSPFX: {
        grid: {
          bottom: 80
        },
        tooltip: tooltip('吨', '吨'),
        legend: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12']
        },
        yAxis: {
          name: '吨',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          }
        },
        series: [
          {
            name: '农产品供应量',
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },

            data: [9, 10, 6, 7, 8]
          }
        ]
      },
      optionNCPLDLQFX: {
        grid: {
          bottom: 80
        },
        tooltip: tooltip('人', '人'),
        legend: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12']
        },
        yAxis: {
          name: '人',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          }
        },
        series: [
          {
            name: '已有劳动力',
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },

            data: [9, 10, 6, 7, 8]
          },
          {
            name: '需求劳动力',
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },

            data: [9, 10, 6, 7, 8]
          }
        ]
      },
      optionNCPJGXQSPFX: {
        tooltip: tooltip('吨', '吨'),
        legend: {
          data: ['差额', '农产品产量', '加工需求量']
        },
        grid: {
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            name: '吨   ',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
        ],
        yAxis: [
          {
            name: '吨',
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12']
          }
        ],
        series: [
          {
            name: '差额',
            type: 'bar',
            label: {
              show: true,
              position: 'inside',
              formatter: function(params) {
                return formatNumber(params.value)
              }
            },
            data: [-5, -5, -5, -5, -3]
          },
          {
            name: '农产品产量',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              formatter: function(params) {
                return formatNumber(params.value)
              }
            },
            data: [9, 10, 6, 7, 8]
          },
          {
            name: '加工需求量',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'left',
              formatter: function(params) {
                return formatNumber(params.value * -1)
              }
            },
            data: [-14, -15, -11, -12, -11]
          }
        ]
      },
      optionNCPCCSPFX: {
        tooltip: tooltip('吨', '吨'),
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            name: '吨',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
        ],
        yAxis: [
          {
            name: '吨',
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12']
          }
        ],
        series: [
          {
            name: '差额',
            type: 'bar',
            label: {
              show: true,
              position: 'inside',
              formatter: function(params) {
                return formatNumber(params.value * -1)
              }
            },
            data: [-5, -5, -5, -5, -5]
          },
          {
            name: '现剩余仓储量',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              formatter: function(params) {
                return formatNumber(params.value)
              }
            },
            data: [9, 10, 6, 7, 8]
          },
          {
            name: '当月产量',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'left',
              formatter: function(params) {
                return formatNumber(params.value * -1)
              }
            },
            data: [-14, -15, -11, -12, -13]
          }
        ]
      },
      optionNCPTZSPFX: {
        isShow: false,
        tooltip: tooltip('吨', '吨'),
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['最新成交价', '预购队列']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2019', '2018'],
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          }
        },
        yAxis: [
          {
            name: '吨',
            nameTextStyle: {
              align: 'left'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
        ],
        grid: {
          left: '7%',
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: ' 交易总额',
            type: 'bar',
            barMaxWidth: 30,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [6, 7, 8, 16]
          },
          {
            name: '农户覆盖率',
            type: 'line',
            data: [6, 7, 8, 15, 25]
          }
        ]
      },
      optionNCPWLSPFX: {
        isShow: false,
        tooltip: tooltip('立方米', '立方米'),
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['最新成交价', '预购队列']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2019', '2018'],
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          }
        },
        yAxis: [
          {
            name: '吨',
            nameTextStyle: {
              align: 'left'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
        ],
        grid: {
          left: '7%',
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: ' 交易总额',
            type: 'bar',
            barMaxWidth: 30,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [6, 7, 8, 16]
          },
          {
            name: '农户覆盖率',
            type: 'line',
            data: [6, 7, 8, 15, 25]
          }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getTowSideBalanceStatMonth({
        groupCode: 'NCPJGXQSPFX',
        dateType: 'month'
      }).then((res) => {
        console.log(res.body.typeValueListMap)
        this.optionNCPJGXQSPFX.legend.data = res.body.typeSet
        this.optionNCPJGXQSPFX.yAxis[0].data = res.body.dateSet
        this.optionNCPJGXQSPFX.series[0].data = res.body.typeValueListMap[res.body.typeSet[0]]
        this.optionNCPJGXQSPFX.series[1].data = res.body.typeValueListMap[res.body.typeSet[1]]
        this.optionNCPJGXQSPFX.series[2].data = res.body.typeValueListMap[res.body.typeSet[2]]
      })

      getTowSideBalanceStatMonth({
        groupCode: 'NCPCCSPFX',
        dateType: 'month'
      }).then((res) => {
        console.log(res.body.typeSet)
        this.optionNCPCCSPFX.legend.data = res.body.typeSet
        this.optionNCPCCSPFX.yAxis[0].data = res.body.dateSet
        for (let i = 0; i < res.body.typeSet.length; i++) {
          this.optionNCPCCSPFX.series[i].name = res.body.typeSet[i]
          this.optionNCPCCSPFX.series[i].data = res.body.typeValueListMap[res.body.typeSet[i]]
        }
        // this.optionNCPCCSPFX.series[1].data = res.body.typeValueListMap[res.body.typeSet[1]]
        // this.optionNCPCCSPFX.series[2].data = res.body.typeValueListMap[res.body.typeSet[2]]
      })

      getTowSideStatMonth({
        groupCode: 'NCPWLSPFX',
        dateType: 'month'
      }).then((data) => {
        const val = data.body
        const options = this.optionNCPWLSPFX
        options.xAxis.data = val.dateSet
        this.optionNCPWLSPFX.legend.data = data.body.typeSet
        var typeValueListMap = data.body.typeValueListMap
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
          // console.log(typeValueListMap[key])
        }
        this.optionNCPWLSPFX.series = valArrval.map((item, index) => {
          return {
            name: valArrKey[index],
            data: valArrval[index],
            type: 'line',
            areaStyle: {}
          }
        })
        options.isShow = true
      })

      getTowSideStatMonth({
        groupCode: 'NCPTZSPFX',
        dateType: 'month'
      }).then((data) => {
        const val = data.body
        const options = this.optionNCPTZSPFX
        options.xAxis.data = val.dateSet
        this.optionNCPTZSPFX.legend.data = data.body.typeSet
        var typeValueListMap = data.body.typeValueListMap
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
          // console.log(typeValueListMap[key])
        }
        this.optionNCPTZSPFX.series = valArrval.map((item, index) => {
          return {
            name: valArrKey[index],
            data: valArrval[index],
            type: 'line',
            areaStyle: {}
          }
        })
        options.isShow = true
      })

      getTowSideStatMonth({
        groupCode: 'NCPGXSPFX',
        dateType: 'month'
      }).then((res) => {
        //console.log(res.body)
        this.optionNCPGXSPFX.xAxis.data = res.body.dateSet
        const data = res.body
        this.optionNCPGXSPFX.legend.data = data.typeSet
        this.optionNCPGXSPFX.series = data.typeSet.map((item, index) => {
          return {
            name: item,
            data: data.typeValueListMap[item],
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            }
          }
        })
      })

      getTowSideStatMonth({
        groupCode: 'NCPLDLQFX',
        dateType: 'month'
      }).then((res) => {
        this.optionNCPLDLQFX.xAxis.data = res.body.dateSet
        this.optionNCPLDLQFX.series[0].data = res.body.typeValueListMap[res.body.typeSet[0]]
        this.optionNCPLDLQFX.series[1].data = res.body.typeValueListMap[res.body.typeSet[1]]
      })
    }
  }
}
</script>
<style scoped>
.second-center {
  width: 47.87%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.7%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
</style>
